<template>
	<view>
		<uni-search-bar placeholder="输入客户名或手机尾号" v-model="keyword" bgColor="#EEEEEE" @input="search" />
		<view class="uni-padding-wrap uni-common-mt">
			<uni-card v-for="(item,index) in data">
				<view class="card-list" @click="clickCard(index)">
					<view class="left">
						<view class="card">{{item.card_template.title}}</view>
						<view class="customer">
							<text class="name">{{item.customer}}</text>
							<text class="mobile">{{item.mobile}}</text>
						</view>
						<view class="date">最后使用日期：{{ formatDate(item.expires_at) }}</view>
					</view>
					<view class="right">
						<view class="title">剩余次数</view>
						<view class="sum">{{item.count - item.mark_count}}</view>
						<view class="btm">点击记卡</view>
					</view>
				</view>
			</uni-card>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import * as manageApi from '@/api/manage.js'
	import * as utils from '@/utils/utils.js'
	export default {
		data() {
			return {
				templateId: 0,
				page: 1,
				keyword: '',
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				totalPage: 1
			};
		},
		watch: {
			keyword: function() {
				console.info('搜索')
				this.start()
			}
		},
		onLoad(option) {
			console.info('参数：', option)
			this.templateId = option.templateId
			this.start();
		},
		onUnload() {
			this.totalPage = 1;
			this.page = 1;
			this.data = [];
			this.loadMoreText = "加载更多";
			this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.totalPage <= this.page) {
				this.loadMoreText = "没有更多数据了!"
				this.showLoadMore = true;
				return;
			}
			this.showLoadMore = true;
			this.setData()
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.start();

		},
		methods: {
			start() {
				this.data = [];
				this.page = 1;
				this.requestData()
				uni.stopPullDownRefresh();
			},
			setData() {
				this.page += 1;
				this.requestData()
			},
			requestData() {
				manageApi.card({
					page: this.page,
					keyword: this.keyword,
					card_template_id: this.templateId
				}).then(res => {
					this.data = this.data.concat(res.data.list);
					this.totalPage = res.data.total_page
					this.showLoadMore = false;
				})
			},
			search(res) {
				console.info(res)
			},
			formatDate(datetime){
				return utils.formatDate(datetime)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-list {
		display: flex;
		height: 200rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 73%;
			font-size: 28rpx;

			.card {}

			.customer {
				display: flex;

				.name {
					padding-right: 30rpx;
				}

				.mobile {}
			}

			.date {
				color: #959595;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				color: #959595;
			}

			.sum {
				font-size: 36rpx;
				font-weight: 700;
				color: #FF0000;
			}
		}
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.uni-loadmore {
		text-align: center;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}
</style>
